<template>
	<view class="AI-page">
		<view class="AI-page-group">
			<view class="introduce">
				<!-- <view class="introduce-tit">
					HI,初次见面
				</view> -->
				<view class="introduce-con">
					水电邦AI知识库已经吸收了近20年的城市水电行业国家标准，重要案例，和学术报告等，同时融入水电邦的操作使用流程，具备多项功能，主要包括智能搜索与精准匹配、多格式支持与内容管理、自动化更新与维护等‌。通过利用自然语言处理（NLP）技术，水电邦AI知识库能够理解用户搜索意图，提供更精准的答案，减少重复问题。它支持多种格式的知识内容管理，包括PDF、图片、视频等，适用于企业培训、客户支持和内部文档管理等多种场景
				</view>
			</view>
			<view class="tit">
				你可以尝试问：
			</view>
			<view class="con">
				<view v-for="(v, i) in chatRecordList" :key="'chatRecordList-' + i" class="li overflow">
					<view class="you">
						<view class="body">
							{{ v.you.text }}
						</view>
					</view>
					<view class="my rt">
						<view>{{ v.my.text }}</view>
					</view>
				</view>
			</view>
			<view class="foo">
				<view class="foo-input">
					<view class="common-chat">
						<uni-icons type="chat" size="16"></uni-icons>
					</view>
					<view class="input-wrapper">
						<input @keyboardheightchange="handlePageHeight" class="uni-input" :adjust-position="false"
							placeholder="带清除按钮的输入框" :value="inputClearValue" @input="clearInput" />
						<uni-icons type="clear" v-if="showClearIcon" @click="clearIcon" size="24"></uni-icons>
						<button class="mini-btn" type="default" size="mini">
							<image src="/static/images/icon/send.png" class="icon-send-img" />
						</button>
					</view>
				</view>
				<view class="tips">内容由AI生成，无法确保真实准确，仅供参考。</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	publics
} from '@/mixins/publics.js';

export default {
	mixins: [publics],
	data() {
		return {
			chatRecordList: [{
				you: {
					text: "水电邦的支付流程和服务流程"
				},
				my: {
					text: ""
				}
			}],
			showClearIcon: false,
			inputClearValue: '',
		}
	},
	methods: {
		clearInput(event) {
			this.inputClearValue = event.detail.value;
			if (event.detail.value.length > 0) {
				this.showClearIcon = true;
			} else {
				this.showClearIcon = false;
			}
		},
		clearIcon() {
			this.inputClearValue = '';
			this.showClearIcon = false;
		},
		handlePageHeight(key) {
			this.$emit('update', key); // 触发事件，将值传递给父组件
		}
	}
}
</script>

<style lang="scss">
.AI-page {
	height: 100%;
	background-color: #fff;
	position: relative;
	left: 0;
	right: 0;
	z-index: 99;

	&-group {
		padding: 19px 14px 0 16px;
		box-sizing: border-box;

		.introduce {
			background: #F3FBF7;
			padding: 23px 17px;
			border-radius: 15px 15px 15px 0;
			margin-bottom: 11px;

			&-tit {
				font-family: PingFangSC-Semibold;
				font-weight: 600;
				font-size: 25px;
				color: #05073B;
				letter-spacing: 0;
				line-height: 26px;
				margin-bottom: 15px;
			}

			&-con {
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 15px;
				color: #05073B;
				letter-spacing: 0;
				line-height: 26px;
				text-indent: 2em;
			}
		}

		.tit {
			font-family: PingFangSC-Semibold;
			font-weight: 600;
			font-size: 15px;
			color: #05073B;
			letter-spacing: 0;
			line-height: 26px;
			margin-bottom: 13.5px;
		}

		.con {

			.you,
			.my {
				width: fit-content;
				background: #F3FBF7;
				border-radius: 5px;
				padding: 6.5px 12px;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 15px;
				color: #05073B;
				letter-spacing: 0;
				margin-bottom: 6px;


				&.my {
					background: #fff;
				}
			}
		}

		.foo {
			background: #FFFFFF;
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			bottom: 0;
			margin-bottom: 6px;
			width: calc(100% - 16px - 14px);

			&-input {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 9px;

				.common-chat {
					width: 30px;
					height: 30px;
					line-height: 30px;
					background: #F9FBFF;
					border: 0.5px solid #E0E0E2;
					border-radius: 22.5px;
					text-align: center;
					display: inline-block;
					margin-right: 7.5px;

					.uni-icons {
						font-weight: bold;
					}
				}

				.input-wrapper {
					width: calc(100% - 32px);
					height: 43px;
					line-height: 43px;
					background: #F9FBFF;
					border: 3px solid #4e6ef214;
					border: 1px solid #22A366;
					border-radius: 22.5px;
					padding-left: 16.5px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-sizing: border-box;
					box-shadow: -1px 0px 6px 3px #4e6ef214;

					.uni-input {
						width: calc(100% - 50px - 24px);
					}

					.mini-btn {
						width: 37px;
						height: 37px;
						border-radius: 37px;
						background: #22A366;
						padding: 0;
						margin: 0 3px 0 0;
						display: flex;
						align-items: center;
						justify-content: center;

						.icon-send-img {
							width: 17px;
							height: 14px;
							margin-top: 3px;
						}
					}

				}
			}

			.tips {
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 10px;
				color: #B8BBCA;
				text-align: center;
			}
		}
	}
}
</style>